<template>
  <div class="app-container">
    <el-button type="primary" v-if="hasPermission('system:role:add')" @click="handleAddRole">新增角色</el-button>

    <el-table :data="rolesList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="索引" width="220">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="id" width="220">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="角色名">
        <template slot-scope="scope">
          {{ scope.row.roleName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" v-if="hasPermission('system:role:edit')" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" v-if="hasPermission('system:role:delete')" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
          <el-button type="warning" size="small" v-if="hasPermission('system:role:bindMenu')" icon="el-icon-delete" @click="assignmentMenu(scope.row.id)">分配菜单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑弹框 -->
    <el-dialog title="编辑角色" width="600px" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="角色名称" label-width="80px">
          <el-input v-model="form.roleName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false,confirmRole()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分配菜单弹框 -->
    <el-dialog title="分配菜单" width="600px" :visible.sync="dialogAssignmentMenu">
      <el-tree
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        :default-checked-keys="roleMenuIds" 
        :props="defaultProps">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAssignmentMenu = false">取 消</el-button>
        <el-button type="primary" @click="dialogAssignmentMenu = false,confirmAssignment()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getRole,addOrUpdateRole,deleteRole,currentRoleMenu} from '@/api/role';
import {getMenu,roleBindMenu} from "@/api/menu";


export default {
  data() {
    return {
      rolesList: [],
      form:{id:null,isDelete:null,roleName:''},
      dialogFormVisible:false,
      dialogAssignmentMenu:false,
      data: [],
      defaultProps: { children: 'children', label: 'name' },
      roleMenuIds:[],
      roleId:null,
    }
  },
  created() {
    this.getRole()
  },
  methods: {
    async getRole() {
      const res = await getRole()
      this.rolesList = res.data.item;
    },
    handleAddRole(){
        this.form.name=''
        this.dialogFormVisible=true;
    },
    handleEdit(row){
      this.dialogFormVisible=true;
      this.form=row;
    },
    confirmRole(){
      addOrUpdateRole(this.form).then(()=>{
        if(this.form.name==''){
        this.$message({message: '新增成功',type: 'success'});
      }else{
        this.$message({message: '修改成功',type: 'success'});
      }
        this.getRole();
      }) 
    },
    handleDelete(id){
      deleteRole(id).then(()=>{
        this.$message({message: '删除成功',type: 'success'});
        this.getRole();
      })
    },
    // 当前选择的节点的key
    assignmentMenu(id){
      this.roleId=id;
      this.roleMenuIds=[];
      getMenu().then((response) => {
        this.data = response.data.item;
      });
      currentRoleMenu(id).then((res)=>{
        this.roleMenuIds=res.data.item
      })
      this.dialogAssignmentMenu=true;
    },
    confirmAssignment(){
      // 当前选择的节点的key 选中的加上半选中的
      let menuIds=this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
      roleBindMenu(this.roleId,menuIds).then(()=>{
        this.$message({message:'绑定成功',type:'success'})
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>